<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
         }
        .box{
            background-color:#f3f1ee ;
            width: 1300px;
            height: 943px;
            border: 5px solid #224357;
         }
          .img{
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 2px solid #224357;
            animation: move 3s linear infinite alternate;
            position: relative;
            left: 1100px;
        }
        @keyframes move{
            to{
                transform: translate(-300%,0);
            }
        } 
        .left{
            width: 30px;
            height: 190px;
            border: 3px solid #224357;
            color:#224357 ;
            line-height: 45px;
            text-align: center;
            position: relative;
            top: 12px;
        }

        .right {
             display: flex; 
            align-items: center;
            position: relative;
            left: 160px;
            bottom: 210px;
         }

       .image {
            width: 160px;
            height: 160px;
        }

        .text {
             padding: 10px;
             width: 600px; 
              word-wrap: break-word;
              word-break: break-all;
              font-style: italic;
              line-height: 30px;
          }
          .left2{
            width: 30px;
            height: 190px;
            border: 3px solid #224357;
            color:#224357 ;
            line-height: 45px;
            text-align: center;
            position: relative;
            bottom: 140px;
        }
        .right2 {
            display: flex;
            align-items: center;
            position: relative;
            left: 335px;
            bottom: 270px;
         }
         p{
            font-style: italic;
         }

         .comment-section {
            position: relative;
            bottom: 70px;
            left: 10px;
         }
         input{
            width: 400px;
            height: 30px;
           
         }
          button{
            width: 60px;
            height: 30px;
          }
          footer{
            width:1220px;
            height:80px;
            margin-top:100px;
            background:#204053;
            color:#fff;
             text-align:center;
             line-height:80px;
             position: relative;
             bottom: 120px;
          }

          a{
            text-align:center;
            font-size: 25px;
            position: relative;
             left: 1100px;
            bottom: 50px;
             color:#224357; ;
             text-decoration: none;
            } 
 
            a:hover{
             text-decoration: underline;
            } 


           .comment {
             border-bottom: 1px solid #224357;
             padding: 5px 0;
           }

        .comment-author {
            font-weight: bold;
        }

         .comment-content {
          margin-top: 3px;
         }
    </style>
</head>
<body>
   

    <div class="box">
        <img src="img/2.png" class="img" "/> 
        <div class="left">开卷有益</div>
        <div class="right">
            <img src="img/11.jpg" class="image">
            <p class="text">史铁生生平简短
                史铁生（1951年1月4日—2010年12月31日）。
他生于北京，1967 年毕业于清华大学附属中学，1969 年去延安一带插队。因双腿瘫痪于 1972 年回到北京。后来又患肾病并发展到尿毒症，靠着每周 3 次透析维持生命。
史铁生是中国当代著名作家，他的作品风格独特，充满对生命、苦难与存在的深刻思考。他创作了大量优秀的文学作品，如《我与地坛》《务虚笔记》《病隙碎笔》等。他的文字具有很强的感染力和哲理深度，对中国当代文学产生了深远影响。
尽管身体饱受病痛折磨，但他始终以坚韧的意志和达观的态度面对生活和创作，展现出非凡的精神力量。2010 年 12 月 31 日，史铁生因突发脑溢血逝世。</p>
            <img src="img/14.jpg" class="image">
          </div>

          <div class="left2">微言大义</div>
          <div class="right2">
            <p>死是一件不必急于求成的事，死是一个必然会降临的节日。</p>
          </div>
          <div class="comment-section">
            <h1>评论区</h1>
            <input type="text" id="commentInput" placeholder="输入你的评论..." >
            <button onclick="addComment()">提交</button>
            <div id="comments"></div>
          </div>
          <a href="shouye.html">返回 </a>
          <footer>
           <div class="foot">
          <p>pengcakapeng@qq.com 版权所有</p>
          </div></footer>

    </div>

    <script>
        function addComment() {
          var commentText = document.getElementById("commentInput").value;
          if (commentText) {
            var commentDiv = document.createElement("div");
            commentDiv.classList.add("comment");
    
            var authorDiv = document.createElement("div");
            authorDiv.classList.add("comment-author");
            authorDiv.textContent = "你";
    
            var contentDiv = document.createElement("div");
            contentDiv.classList.add("comment-content");
            contentDiv.textContent = commentText;
    
            commentDiv.appendChild(authorDiv);
            commentDiv.appendChild(contentDiv);
    
            document.getElementById("comments").appendChild(commentDiv);
    
            document.getElementById("commentInput").value = "";
          }
        }
      </script>
</body>
</html>